<template>
    <u-tabbar v-if="showTabbar" v-model="current" v-bind="tabbarStyle" :list="tabbarList" @change="handleChange"
        :hide-tab-bar="false"></u-tabbar>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'
import { computed, ref } from 'vue'
const current = ref()
const appStore = useAppStore()
// const { getImageUrl } = useAppStore()
const getAssetUrl = (image: string) => {
    return new URL(`/static/images/${image}.png`, import.meta.url).href
}
const tabbarList = ref([
    {
        iconPath: getAssetUrl('work'),
        selectedIconPath: getAssetUrl('work_act'),
        text: '工作台',
        link: {
            path: '/pages/home/index',
        },
        pagePath: '/pages/home/index'
    },
    {
        iconPath: getAssetUrl('note'),
        selectedIconPath: getAssetUrl('note_act'),
        text: '通讯录',
        link: {
            path: '/pages/address/index',
        },
        pagePath: '/pages/address/index'
    },
    {
        iconPath: getAssetUrl('massage'),
        selectedIconPath: getAssetUrl('massage_act'),
        text: '消息',
        link: {
            path: '/pages/massage/index',
        },
        pagePath: '/pages/massage/index'
    },
    {
        iconPath: getAssetUrl('user'),
        selectedIconPath: getAssetUrl('user_act'),
        text: '我的',
        link: {
            path: '/pages/user/index',
        },
        pagePath: '/pages/user/index'
    }
])

const showTabbar = computed(() => {
    const currentPages = getCurrentPages()
    const currentPage = currentPages[currentPages.length - 1]
    const current = tabbarList.value.findIndex((item: any) => {
        return item.pagePath === '/' + currentPage.route
    })
    return current >= 0
})
const tabbarStyle = computed(() => ({
    activeColor: '#1B76EB',
    inactiveColor: '#555'
}))
const handleChange = (index: number) => {
    const selectTab = tabbarList.value[index]
    navigateTo(selectTab.link, 'reLaunch')
}
</script>
